<template>
  <div class="boxInfo">
    <!-- 表单内容 -->
    <div class="formInfo">
      <div>
        <!-- 头部信息  -->
        <div class="userInfo">
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="handlerAdd">新增角色</el-button>
          <el-table
            :data="dataList"
            border
            fit
            highlight-current-row
            style="width:100%; margin-top:10px;"
          >
            <el-table-column type="index" :index="1" label="序号" width="150"></el-table-column>
            <el-table-column sortable prop="name" label="角色名" width="150"></el-table-column>
            <el-table-column sortable prop="description" label="描述"></el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="250">
              <template slot-scope="scope">
                <el-button @click="handlerPerm(scope.row)" type="text" size="small">分配权限</el-button>
                <el-button @click="handleUpdate(scope.row)" type="text" size="small">修改</el-button>
                <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <PageTool
              :paginationPage="requestParameters.page"
              :paginationPagesize="requestParameters.pagesize"
              :total="counts"
              @pageChange="handleCurrentChange"
              @pageSizeChange="handleSizeChange"
            ></PageTool>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="编辑角色" :visible.sync="dialogFormVisible" style="hight:100px;line-height:1px">
      <el-form :model="formData" label-width="90px" style="margin-top:20px">
        <el-form-item label="角色名称">
          <el-input v-model="formData.name" autocomplete="off" style="width:90%"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="formData.description" autocomplete="off" style="width:90%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="'为【'+formData.name+'】分配权限'"
      :visible.sync="permFormVisible"
      style="hight:100px;line-height:1px"
    >
      <el-tree
        :data="treeData"
        default-expand-all
        show-checkbox
        node-key="id"
        ref="tree"
        :check-strictly="true"
        :default-checked-keys="checkNodes"
        :props="{label:'name'}"
      ></el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="permFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="assignPrem">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, update, remove, detail, assignPrem } from '@/api/base/role';
import * as permApi from '@/api/base/permissions';
import commonApi from '@/utils/common';
import PageTool from './../../components/page/page-tool';
var _this = null;
export default {
  name: 'roleList',
  components: { PageTool },
  props: ['objId'],
  data () {
    return {
      formData: {},
      treeData: [],
      checkNodes: [],
      dialogFormVisible: false,
      permFormVisible: false,
      dataList: [],
      counts: 0,
      requestParameters: {
        page: 1,
        pagesize: 10
      }
    };
  },
  methods: {
    assignPrem () {
      assignPrem({ id: this.formData.id, permIds: this.$refs.tree.getCheckedKeys() }).then(res => {
        this.$message({ message: res.data.message, type: res.data.success ? 'success' : 'error' });
        this.permFormVisible = false;
      });
    },
    handlerPerm (obj) {
      detail({ id: obj.id }).then(res => {
        this.formData = res.data.data;
        this.checkNodes = res.data.data.permIds;
        permApi.list({ type: 0, pid: null, enVisible: 1 }).then(res => {
          this.treeData = commonApi.transformTozTreeFormat(res.data.data);
          this.permFormVisible = true;
        });
      });
    },
    handlerAdd () {
      this.formData = {};
      this.dialogFormVisible = true;
    },
    handleDelete (obj) {
      this.$confirm(
        `本次操作将删除${obj.name},删除后角色将不可恢复，您确认删除吗？`
      ).then(() => {
        remove({ id: obj.id }).then(res => {
          this.$message({ message: res.data.message, type: res.data.success ? 'success' : 'error' });
          this.doQuery();
        });
      });
    },
    handleUpdate (obj) {
      detail({ id: obj.id }).then(res => {
        this.formData = res.data.data;
        this.formData.id = obj.id;
        this.dialogFormVisible = true;
      });
    },
    saveOrUpdate () {
      if (this.formData.id == null || this.formData.id == undefined) {
        this.save();
      } else {
        this.update();
      }
    },
    update () {
      update(this.formData).then(res => {
        this.$message({ message: res.data.message, type: res.data.success ? 'success' : 'error' });
        if (res.data.success) {
          this.formData = {};
          this.dialogFormVisible = false;
          this.doQuery();
        }
      });
    },
    save () {
      add(this.formData).then(res => {
        this.$message({ message: res.data.message, type: res.data.success ? 'success' : 'error' });
        if (res.data.success) {
          this.formData = {};
          this.dialogFormVisible = false;
          this.doQuery();
        }
      });
    },
    // 获取详情
    doQuery () {
      list(this.requestParameters).then(res => {
        this.dataList = res.data.data.rows;
        this.counts = res.data.data.total;
      });
    },
    // 每页显示信息条数
    handleSizeChange (pageSize) {
      this.requestParameters.pagesize = pageSize;
      if (this.requestParameters.page === 1) {
        _this.doQuery(this.requestParameters);
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestParameters.page = val;
      _this.doQuery();
    }
  },
  // 挂载结束
  mounted: function () { },
  // 创建完毕状态
  created: function () {
    _this = this;
    this.doQuery();
  },
  // 组件更新
  updated: function () { }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.el-collapse-item__arrow {
  float: left;
}

.el-collapse-item {
  position: relative;
  // width: 80%;
  // .el-collapse-item__header{width: 80%;}
  .infoR {
    position: absolute;
    background: #fff;
    display: inline-block;
    width: 100px;
    height: 35px;
    line-height: 35px;
    text-align: right;
    right: -100px;
    top: 0px;
  }
}
// .el-input--medium {
//   width: 80%;
// }
.linkage {
  display: inline-block;
}
.textBotm {
  vertical-align: text-bottom;
}
.navInfo {
  height: auto;
  font-size: 30px;
  color: #333;
  background-color: #e4e4e4;
  text-align: center;
  border-bottom: 1px solid #333;
}
.step {
  position: fixed;
  left: 220px;
  top: 50%;
  margin-top: -150px;
  background: #fff;
  z-index: 9;
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
